<template>
  <div class="StockMarket f-cb">
    <div class="f-cb StockMarket_top">
      <div class="left fl boxs">
        <h2>{{ $t("hkStock.hk_Market.56hzwpvbf7c0") }}</h2>
        <div class="cont f-cb" :style="{ height: heightList.allHeight + 'px' }">
          <ul class="f-cb MarketList">
            <li
              v-for="(item, index) in timeList"
              :key="index"
              :class="index == ActiveMar ? 'on' : ''"
              @click="ListChange(index)"
            >
              <h3>{{ item.detail.name }}</h3>
              <h2
                class="lastprice"
                :class="
                  item.detail.gain > 0
                    ? 'on red'
                    : item.detail.gain == 0
                    ? ''
                    : 'in green'
                "
              >
                {{ item.detail.latestPrice | toFixed(item.detail.precision) }}
              </h2>
              <p
                :class="
                  item.detail.gain > 0
                    ? 'on red'
                    : item.detail.gain == 0
                    ? ''
                    : 'in green'
                "
              >
                <span
                  >{{ item.detail.chg > 0 ? "+" : ""
                  }}{{ parseFloat(item.detail.chg) | toFixed(2) }}</span
                >
                <span
                  >{{ item.detail.gain > 0 ? "+" : ""
                  }}{{ parseFloat(item.detail.gain * 100) | toFixed(2) }}%</span
                >
              </p>
            </li>
          </ul>
          <div class="echarts" v-if="timeList.length >= 0">
            <my-echarts
              :timeData="timeData"
              :echartHeight="heightList.slideHeight"
              :echartWidth="echartWidth"
              ref="dapanT"
            ></my-echarts>
          </div>
        </div>
      </div>
      <div class="boxs fl center">
        <h2>{{ $t("hkStock.hk_Market.56hzwpvbfuo0") }}</h2>
        <div :style="{ height: heightList.allHeight + 'px' }" class="cont">
          <bar-echarts :childrenList="barList"></bar-echarts>
          <div class="f-cb slie_width">
            <p
              class="on"
              :style="{
                width:
                  String(zhangmnum.low / zhangmnum.all) == 'NaN'
                    ? '33.3%'
                    : (zhangmnum.low / zhangmnum.all) * 100 + '%',
              }"
            >
              <span class="green">{{ $t("m.fail") }}:{{ Number(zhangmnum.low) | formatNumberRgx }}</span>
            </p>
            <p
              :style="{
                width:
                  String(zhangmnum.zero / zhangmnum.all) == 'NaN'
                    ? '33.3%'
                    : (zhangmnum.zero / zhangmnum.all) * 100 + '%',
              }"
            >
              <!-- <span>{{$t('m.level')}}{{zhangmnum.zero}}{{$t('m.Family')}}</span> -->
            </p>
            <p
              class="in"
              :style="{
                width:
                  String(zhangmnum.up / zhangmnum.all) == 'NaN'
                    ? '33.3%'
                    : (zhangmnum.up / zhangmnum.all) * 100 + '%',
              }"
            >
              <span class="red">{{ $t("m.rise") }}:{{ Number(zhangmnum.up) | formatNumberRgx }}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="right fr boxs">
        <h2>{{ $t("hkStock.hk_Market.56hzwpvbfzc0") }}</h2>
        <div class="cont" :style="{ height: heightList.allHeight + 'px' }">
          <stock-linlist
            :sortList="hk_LeadList"
            :stockHeight="heightList.slideHeight"
            @ListClick="ListClick"
          ></stock-linlist>
        </div>
      </div>
    </div>
    <div class="StockMarket_bot f-cb">
      <!-- <div class="left fl f-cb"> -->
        <!-- <h2>异动股</h2> -->
        <ul class="f-cb market_botList">
          <li>
            <!-- 涨幅榜 -->
            <h4>{{ $t("hkStock.hk_Market.56hzwpvbg2o0") }}</h4>
            <div class="change_height">
              <stock-list
                :tableData="UpData"
                :sortList="hk_Up"
                @scrollBottom="scrollBottom(1, 'UpData', hk_Up.page, 'hk_Up')"
                @ListClick="ListClick"
                :stockHeight="changeHeight"
              ></stock-list>
            </div>
          </li>
          <li>
            <!-- 跌幅榜 -->
            <h4>{{ $t("hkStock.hk_Market.56hzwpvbg5k0") }}</h4>
            <div class="change_height">
              <stock-list
                :tableData="downData"
                :sortList="hk_down"
                @scrollBottom="
                  scrollBottom(2, 'downData', hk_down.page, 'hk_down')
                "
                @ListClick="ListClick"
                :stockHeight="changeHeight"
              ></stock-list>
            </div>
          </li>
          <li>
            <!-- 换手率榜 -->
            <h4>{{ $t("hkStock.hk_Market.56hzwpvbg8s0") }}</h4>
            <div class="change_height">
              <stock-list
                :tableData="huanData"
                :sortList="hk_huan"
                @scrollBottom="
                  scrollBottom(3, 'huanData', hk_huan.page, 'hk_huan')
                "
                @ListClick="ListClick"
                :stockHeight="changeHeight"
              ></stock-list>
            </div>
          </li>
          <li>
            <h4>{{ $t("hkStock.hk_Market.56hzwpvbgbk0") }}</h4>
            <div class="change_height">
              <stock-list
                :tableData="FinancingData"
                :sortList="hk_financing"
                @ListClick="ListClick"
                :stockHeight="changeHeight"
              ></stock-list>
            </div>
          </li>
          <li>
            <h4>{{ $t("hkStock.hk_Market.56hzwpvbgfw0") }}</h4>
            <div class="change_height">
              <stock-list
                :tableData="SecuritiesData"
                :sortList="hk_securities"
                @ListClick="ListClick"
                :stockHeight="changeHeight"
              ></stock-list>
            </div>
          </li>
        </ul>
      <!-- </div> -->
        <!-- <h2>融资融券</h2> -->
      <!-- <div class="right fr f-cb">
        <ul class="f-cb twoList">
          <li>
            <h4>{{ $t("hkStock.hk_Market.56hzwpvbgbk0") }}</h4>
            <div class="change_height">
              <stock-list
                :tableData="FinancingData"
                :sortList="hk_financing"
                @ListClick="ListClick"
                :stockHeight="changeHeight"
              ></stock-list>
            </div>
          </li>
          <li>
            <h4>{{ $t("hkStock.hk_Market.56hzwpvbgfw0") }}</h4>
            <div class="change_height">
              <stock-list
                :tableData="SecuritiesData"
                :sortList="hk_securities"
                @ListClick="ListClick"
                :stockHeight="changeHeight"
              ></stock-list>
            </div>
          </li>
        </ul>
      </div> -->
    </div>
  </div>
</template>
<script>
import {get_grail_index, get_margin_trade} from '@/assets/js/API/market.js';
import {get_ranking, get_gain_distribute} from '@/assets/js/API/market.js';
import myEcharts from "@/components/info/echart.vue";
import barEcharts from "@/components/stock/barEcharts.vue";
import stockList from "@/components/stock/stock_List.vue";
import stockLinlist from "@/components/stock/stock_Linlist.vue";
export default {
  components: { myEcharts, barEcharts, stockLinlist, stockList },
  data() {
    return {
      LeadHeight: null, // 底部内容
      changeHeight: null, //
      heightList: {
        allHeight: null,
        slideHeight: null,
      },
      timeList: [],
      barList: {
        num: [
          [">20"],
          ["15", "~", "20"],
          ["10", "~", "15"],
          ["5", "~", "10"],
          ["0", "~", "5"],
          ["0"],
          ["0", "~", "5"],
          ["5", "~", "10"],
          ["10", "~", "15"],
          ["15", "~", "20"],
          [">20"],
        ],
        numdata: [],
      },
      subtypes: {
        type: "HK",
      },
      timeClick: null,
      ActiveMar: 0,
      timeData: {}, // 当前分时数据
      echartWidth: null,
      zhangmnum: {},
      hk_LeadList: {
        hk_Leading: "/hk_Leading",
        priceShow: true,
        order: ["", "DESC", "ASC"],
        name: "order",
        url: "/market.v1/market/plateList", //行业列表
        submit: {
          plateType: "1",
          type: "HK",
          securityType: "1",
          order: "DESC",
          pageSize: 200,
        },
      },
      UpData: [],
      downData: [],
      huanData: [],
      hk_Up: {
        priceShow: false,
        toggleShow: false,
        price: ["names", "names1", "names2"],
        toggle: ["names", "names1", "names2"],
        url: "",
        page: 1,
        listType: 1,
        loading: true,
        submit: {},
        title: this.$i18n.t("m.quoteChange"),
      },
      hk_down: {
        priceShow: false,
        toggleShow: false,
        price: ["names", "names1", "names2"],
        toggle: ["names", "names1", "names2"],
        url: "",
        page: 1,
        listType: 2,
        loading: true,
        submit: {},
        title: this.$i18n.t("m.quoteChange"),
      },
      hk_huan: {
        priceShow: false,
        toggleShow: false,
        price: ["names", "names1", "names2"],
        toggle: ["names", "names1", "names2"],
        url: "",
        page: 1,
        listType: 3,
        loading: true,
        submit: {},
        type: "turnover",
        title: this.$i18n.t("m.TurnoverRate"),
      },
      hk_financing: {
        priceShow: false,
        toggleShow: false,
        price: ["names", "names1", "names2"],
        toggle: ["names", "names1", "names2"],
        url: "",
        page: 1,
        listType: 4,
        loading: true,
        submit: {},
        title: this.$i18n.t("m.quoteChange"),
      },
      hk_securities: {
        priceShow: false,
        toggleShow: false,
        price: ["names", "names1", "names2"],
        toggle: ["names", "names1", "names2"],
        url: "",
        page: 1,
        listType: 5,
        loading: true,
        submit: {},
        title: this.$i18n.t("m.quoteChange"),
      },
      FinancingData: [],
      SecuritiesData: [],
    };
  },
  created() {
    if ($(window).width() > 1441) {
      this.heightList = { allHeight: 398, slideHeight: 378 };
    } else {
      this.heightList = { allHeight: 298, slideHeight: 278 };
    }
  },
  mounted() {
    this.getHK();
    this.setval();
    this.getupdown();
    this.getupdata(1, "UpData", 1, "hk_Up");
    this.getupdata(2, "downData", 1, "hk_down");
    this.getupdata(3, "huanData", 1, "hk_huan");
    this.getFinancingData(4, "FinancingData", 1, "hk_financing");
    this.getSecuritiesData(5, "SecuritiesData", 1, "hk_securities");
    var _this = this;

    this.$nextTick(function () {
      this.echartWidth = $(".echarts").width();
      this.changeHeight =
        $(".StockMarket").height() - $(".StockMarket_top").height() - 39;
      this.LeadHeight = $(".change_height").height();
    });
  },
  methods: {
    ListChange(index) {
      // 切换重新填充数据
      this.ActiveMar = index;
      this.timeData = this.timeList[index];
      this.$refs.dapanT.getTimeLines(this.timeData);
      this.echartWidth = $(".echarts").width();
    },
    async getHK() {
      const res = await get_grail_index({ ...this.subtypes })
      if (res.code != 1) return this.$message.error(res.msg);
      this.timeList = res.data.list;
      this.echartWidth = $(".echarts").width();
    },
    getupdown() {
      let _this = this;
        get_gain_distribute({ ..._this.subtypes }).then(function (response) {
          if (response.code == 1) {
            _this.barList = Object.assign({}, _this.barList, {
              numdata: response.data.list,
            });
            _this.zhangmnum = response.data.total;
            _this.zhangmnum.all =
              _this.zhangmnum.low + _this.zhangmnum.up + _this.zhangmnum.zero;
          } else {
            _this.$message({
              message: response.data.msg,
              type: "warning",
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    scrollBottom(obj, list, page, data) {
      //alert(this[data].loading)
      this[data].loading = true;
      if (obj == 4) {
        this.getFinancingData(obj, list, page, data);
      } else if (obj == 5) {
        this.getSecuritiesData(obj, list, page, data);
      } else {
        this.getupdata(obj, list, page, data);
      }
    },
    // 得到涨跌榜单数据
    getupdata(obj, list, page, data) {
      let _this = this;
      if (_this[data].loading) {
          get_ranking({ type: "HK", rankType: obj, page: page }).then(function (response) {
            if (response.code == 1) {
              _this[data].page++;
              // _this[list] = response.data.list;
              _this[list] = [..._this[list], ...response.data.list];
              _this[data].loading = false;
            } else {
              _this.$message({
                message: response.data.msg,
                type: "warning",
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    // 融资
    getFinancingData(obj, list, page, data) {
      let _this = this;
      if (_this[data].loading) {
          get_margin_trade({ type: "HK", platform: "PC", page: page }).then(function (response) {
            if (response.code == 1) {
              _this[data].page++;
              // _this[list] = response.data.list;
              _this[list] = [..._this[list], ...response.data.list];
              _this[data].loading = false;
            } else {
              _this.$message({
                message: response.data.msg,
                type: "warning",
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    getSecuritiesData(obj, list, page, data) {
      let _this = this;
      if (_this[data].loading) {
          get_margin_trade({
            type: "HK", platform: "PC", page: page
          }).then(function (response) {
            if (response.code == 1) {
              _this[data].page++;
              // _this[list] = response.data.list;
              _this[list] = [..._this[list], ...response.data.list];
              _this[data].loading = false;
            } else {
              _this.$message({
                message: response.data.msg,
                type: "warning",
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    setval() {
      var _this = this;
      _this.timeClick = setInterval(() => {
        _this.getHK();
      }, 10000);
    },
    ListClick(isTrue) {
      this.$store.dispatch("SetHkActive", isTrue);
    },
  },
  watch: {
    // 监听大盘行情变化
    "$store.state.wsModel.daPanDetail": {
      handler(val, old) {
        var _this = this;
        if (val != "") {
          // _this.$forceUpdate();
          let data = JSON.parse(val);
          // 港股
          if (data[0] == "HKEX") {
            for (let i = 0; i < _this.timeList.length; i++) {
              // 当前列表股票代码一致
              if (_this.timeList[i].detail.symbol == data[3]) {
                this.$nextTick(() => {
                  _this.$set(_this.timeList[i].detail, "latestPrice", data[4]);
                  _this.$set(
                    _this.timeList[i].detail,
                    "gain",
                    (data[4] - data[8]) / data[8]
                  );
                  _this.$set(_this.timeList[i].detail, "chg", data[4] - data[8]);
                });
                break;
              }
            }
          }
        }
      },
      deep: true,
    },
    timeList: {
      handler(val) {
        if(val != null) {
          // 定时刷新大盘分时线
          if(this.ActiveMar != null) {
            this.timeData = this.timeList[this.ActiveMar];
            this.$refs.dapanT.getTimeLines(this.timeData);
          }
        }
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timeClick); //关闭
  },
};
</script>
<style lang="less" scoped>
.StockMarket {
  .StockMarket_top {
    margin-bottom: 20px;
    .boxs {
      border: 1px solid @LightBorderLine;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      h2 {
        // font-size: 14px;
        // color: @fff;
        // line-height: 40px;
        // padding: 0 15px;
        // border-bottom: 1px solid @LightBorderLine;
        font-size: 12px;
        color: @fbSix;
        padding: 0 12px;
        line-height: 30px;
        background: @sideColor;
      }
      .cont {
        padding: 10px 5px 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
      .MarketList {
        width: 160px;
        text-align: center;
        float: left;
        li {
          width: 100%;
          padding: 10px 0 11px;
          border: 1px solid @LightBorderLine;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          cursor: pointer;
          margin-top: 10px;
        }
        li:first-child {
          margin-top: 0;
        }
        li.on,
        li:hover {
          background: @sideColor;
          border-color: @sideColor;
        }
        h3 {
          font-size: 14px;
          color: @fff;
          line-height: 32px;
        }
        .lastprice {
          // font-size:25px;
          // line-height: 40px;
          // border:none;
          font-size: 18px;
          color: @fbSix;
          padding: 0 12px;
          line-height: 30px;
          background: transparent;
        }
        p {
          font-size: 14px;
          line-height: 26px;
          span {
            margin: 0 2px;
            color: @fbSix;
          }
        }
      }
      .echarts {
        float: right;
        width: calc(100% - 170px);
        overflow: auto;
      }
      .slie_width {
        display: flex;
        p {
          float: left;
          padding-top: 19px;
          position: relative;
          height: 32px;
          box-sizing: border-box;
          span {
            position: absolute;
            bottom: 0;
            left: 50%;
            font-size: 14px;
            color: @fbSix;
            width: 150px;
            line-height: 20px;
            transform: translate(-50%, 0);
            text-align: center;
          }
        }
        p:after {
          width: 100%;
          height: 6px;
          background: @fbSix;
          content: " ";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
        }
        p.on {
          span {
            text-align: left;
            left: 0;
            transform: translate(0, 0);
          }
        }
        p.in {
          span {
            text-align: right;
            left: auto;
            right: 0;
            transform: translate(0, 0);
          }
        }
      }
    }
    .left {
      margin-right: 20px;
      width: 47%;
    }
    .center,
    .right {
      width: calc((53% - 40px) / 2);
    }
  }
  .StockMarket_bot {
    width: 100%;
    h2 {
      // font-size: 14px;
      // color: @fff;
      // line-height: 40px;
      // padding: 0 15px;
      // border-bottom: 1px solid @LightBorderLine;
      font-size: 12px;
      color: @fbSix;
      padding: 0 12px;
      line-height: 30px;
      //background: @sideColor;
    }
    ul.market_botList {
      // height:calc(100% - 40px);
      // padding: 10px;
      width: 100%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      padding: 0;
      li:first-child {
        margin-left: 0;
      }
      li {
        float: left;
        // height: 100%;
        margin-left: 10px;
        width: calc((100% - 40px) / 5);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid @LightBorderLine;
        h4 {
          font-size: 12px;
          color: @fbSix;
          padding: 0 12px;
          line-height: 30px;
          background: @sideColor;
        }
        .change_height {
          width: 100%;
          // height: calc(100% - 30px);
        }
      }
    }
  }
}
@media screen and (max-width: 1441px) {
  .StockMarket .StockMarket_top .boxs .MarketList h2 {
    font-size: 19px;
    line-height: 23px;
    background-color: transparent;
  }
  .StockMarket .StockMarket_top .boxs .MarketList h3 {
    line-height: 24px;
  }
  .StockMarket .StockMarket_top .boxs .MarketList li {
    padding: 6px 0 5px;
  }
  // .StockMarket .StockMarket_bot {
  // height: calc(100% - 361px);
  // }
}
@media screen and (min-width: 1920px) {
  .StockMarket .StockMarket_top .boxs .MarketList h2 {
    background-color: transparent;
  }
  .StockMarket {
    .StockMarket_bot {
      height: calc(100% - 430px);
      .left,
      .right {
        height: 100%;
      }
      ul {
        height: 98%;
        li {
          height: 100%;
          .change_height {
            height: calc(100% - 30px);
          }
        }
      }
    }
  }
}
</style>